<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clipping History - MaoXian</title>
    <link rel="icon" type="image/png" href="../icons/mx-wc-32.png" />
    <link href="../vendor/css/awesomplete.css" rel="stylesheet" />
    <link href="../vendor/css/pikaday.css" rel="stylesheet" />
    <link href="history.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="main">
      <div class="links"></div>
      <div class="clearfix"></div>

      <div class="search-box advanced-search-mode">
        <form>
          <input id="created-at-from" type="text" i18n-attr="placeholder:placeholder.created-at-from"/>
          <input id="created-at-to" type="text" i18n-attr="placeholder:placeholder.created-at-to"/>
          <input id="category" type="text" i18n-attr="placeholder:placeholder.category"/>
          <input id="tag" type="text" i18n-attr="placeholder:placeholder.tag"/>
          <button type="reset" i18n="btn.reset"></button>
        </form>
      </div>

      <div class="search-box">
        <form>
          <input id="search" type="text" i18n-attr="placeholder:placeholder.search"/>
          <button id="search-btn" i18n="btn.search"></button>
          <button type="reset" i18n="btn.reset"></button>
        </form>
      </div>

      <div class="actions">
        <button id="export-history" i18n="btn.export-history"></button>
        <button id="clear-history" i18n="btn.clear-history"></button>
      </div>
      <div class="clearfix"></div>

      <br />
      <div class="actions">
        <input id="advanced-search-mode" type="checkbox" />
        <label for="advanced-search-mode" i18n="label.advanced-search-mode"></label>
        <input id="confirm-mode" type="checkbox" />
        <label for="confirm-mode" i18n="label.confirm-mode"></label>
      </div>
      <div class="clearfix"></div>

      <div class="notices">
        <div class="notice-warning" i18n="notice.delete"></div>
      </div>


      <div class="history">
        <div class="no-record" style="display: none" i18n="g.hint.no-record"></div>
        <div class="list" style="display: none;">
          <table class="clippings">
            <thead>
              <tr>
                <th width="4%" i18n="g.clipping.time"></th>
                <th width="8%" i18n="g.clipping.category"></th>
                <th width="8%" i18n="g.clipping.tag"></th>
                <th widtn="68%" i18n="g.clipping.title"></th>
                <th width="8%"> - </th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>


    <div class="modal">
      <div class="mask">
        <div class="content">
        </div>
      </div>
    </div>

    <template id="trow-tpl">
      <tr data-id="${clipId}">
        <td>${time}</td>
        <td>${category}</td>
        <td>${tags}</td>
        <td class="${format}">
          <span class="format"></span>
          ${title}
        </td>
        <td class="operation">
          <a href="history.delete:${clipId}" i18n="g.btn.delete"></a>
        </td>
      </tr>
    </template>

    <template id="modal-content-tpl">
      <table>
        <tbody>
          <tr><th i18n="g.clipping.title"></th><td>${title}</td></tr>
          <tr><th i18n='g.clipping.path'></th><td>${clipPath}</td></tr>
        </tbody>
      </table>
      <table>
        <tbody>
          <tr>
            <th i18n="g.clipping.time"></th><td>${createdAt}</td>
            <th i18n="g.clipping.category"></th><td>${category}</td>
          </tr>
          <tr>
            <th i18n="g.clipping.tag"></th><td>${tags}</td>
            <th i18n="g.clipping.format"></th><td>${format}</td>
          </tr>
          <tr>
            <th i18n='g.clipping.original-url'></th>
            <td colspan="3">
              <a href="${originalUrl}" target="_blank" referrerpolicy="no-referrer" rel="noopener noreferrer">${originalUrl}</a>
            </td>
          </tr>
        </tbody>
      </table>
    </template>

    <!-- scripts -->
    <script src="../vendor/js/browser-polyfill.js"></script>
    <script src="../vendor/js/i18n.js"></script>
    <script src="../vendor/js/awesomplete.js"></script>
    <script src="../vendor/js/pikaday.js"></script>
    <script src="../_locales/en/common.js"></script>
    <script src="../_locales/en/history.js"></script>
    <script src="../_locales/zh_CN/common.js"></script>
    <script src="../_locales/zh_CN/history.js"></script>
    <script src="history.js" type="module"></script>
  </body>
</html>
